const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    del = require('del'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass')

const a = () => del(['dist'])

const path = {
    html: {
        src: 'code/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'code/css/**/*.scss',
        dest: 'dist/css'
    },
    js: {
        src: 'code/js/**/*.js',
        dest: 'dist/js'
    },
    img: {
        src: 'code/images/**/*',
        dest: 'dist/images'
    },
    libs: {
        src: 'code/libs/**/*',
        dest: 'dist/libs'
    }
}
//通过函数的方式：制定html任务
const html = () => {
    // 需要把任务代码return
    return gulp.src(path.html.src).pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
    }))
        .pipe(gulp.dest(path.html.dest))
        .pipe(connect.reload())
}

//css任务：先把scss任务编译成css,再压缩
const css = () => {
    return gulp.src(path.css.src)
        .pipe(sass())
        // .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
        .pipe(connect.reload())
}

//js任务

const js = () => {
    return gulp.src(path.js.src).pipe(babel({
        presets: ['@babel/env']
    }))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}

//img任务复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))

//libs任务
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

//server任务
const server = () => {
    connect.server({
        root: 'dist',
        livereload: true,
        port: 1245
    })
}
//watch任务，监听一些文件的修改，一旦被修改就重启对应的任务
const watch = () => {
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}

//gulp.series 是同步执行任务，第一个执行完了才能执行第二个
//gulp.parallel 是异步执行任务，多个任务同事运行
module.exports.default = gulp.series(a, gulp.parallel(html, css, js, img, libs, server, watch))
// module.exports = {
//     html,
//     server,
//     css
// }